<!-- Right Sidebar -->
<div class="right-bar">

    <div class="rightbar-title">
        <a href="javascript:void(0);" class="right-bar-toggle float-right">
            <i class="dripicons-cross noti-icon"></i>
        </a>
        <h5 class="m-0">Settings</h5>
    </div>

    <div class="rightbar-content h-100" data-simplebar>

        <div class="p-3">
            <div class="alert alert-warning" role="alert">
                전체적인 색 구성표, 사이드 바 메뉴 등을 <strong>사용자 지정</strong>합니다.
            </div>

            <!-- Settings -->
            <h5 class="mt-3">색 구성표</h5>
            <hr class="mt-1"/>

            <div class="custom-control custom-switch mb-1">
                <input type="radio" class="custom-control-input" name="color-scheme-mode" value="light"
                       id="light-mode-check"/>
                <label class="custom-control-label" for="light-mode-check">Light Mode</label>
            </div>

            <div class="custom-control custom-switch mb-1">
                <input type="radio" class="custom-control-input" name="color-scheme-mode" value="dark"
                       id="dark-mode-check"/>
                <label class="custom-control-label" for="dark-mode-check">Dark Mode</label>
            </div>

            <!-- Width -->
            <h5 class="mt-4">넓이</h5>
            <hr class="mt-1"/>
            <div class="custom-control custom-switch mb-1">
                <input type="radio" class="custom-control-input" name="width" value="fluid" id="fluid-check"/>
                <label class="custom-control-label" for="fluid-check">Fluid</label>
            </div>
            <div class="custom-control custom-switch mb-1">
                <input type="radio" class="custom-control-input" name="width" value="boxed" id="boxed-check"/>
                <label class="custom-control-label" for="boxed-check">Boxed</label>
            </div>

            <!-- Left Sidebar-->
            <h5 class="mt-4">왼쪽 사이드바</h5>
            <hr class="mt-1"/>
            <div class="custom-control custom-switch mb-1">
                <input type="radio" class="custom-control-input" name="theme" value="default" id="default-check"/>
                <label class="custom-control-label" for="default-check">Default</label>
            </div>

            <div class="custom-control custom-switch mb-1">
                <input type="radio" class="custom-control-input" name="theme" value="light" id="light-check"/>
                <label class="custom-control-label" for="light-check">Light</label>
            </div>

            <div class="custom-control custom-switch mb-3">
                <input type="radio" class="custom-control-input" name="theme" value="dark" id="dark-check"/>
                <label class="custom-control-label" for="dark-check">Dark</label>
            </div>

            <div class="custom-control custom-switch mb-1">
                <input type="radio" class="custom-control-input" name="compact" value="fixed" id="fixed-check"/>
                <label class="custom-control-label" for="fixed-check">Fixed</label>
            </div>

            <div class="custom-control custom-switch mb-1">
                <input type="radio" class="custom-control-input" name="compact" value="condensed"
                       id="condensed-check"/>
                <label class="custom-control-label" for="condensed-check">Condensed</label>
            </div>

            <div class="custom-control custom-switch mb-1">
                <input type="radio" class="custom-control-input" name="compact" value="scrollable"
                       id="scrollable-check"/>
                <label class="custom-control-label" for="scrollable-check">Scrollable</label>
            </div>

            <button class="btn btn-primary btn-block mt-4" id="resetBtn">기본값으로 재설정</button>
        </div> <!-- end padding-->

    </div>
</div>

<div class="rightbar-overlay"></div>
<!-- /Right-bar -->

<script>
  const lmc = document.getElementById('light-mode-check')
  const dmc = document.getElementById('dark-mode-check')

  const flc = document.getElementById('fluid-check')
  const boc = document.getElementById('boxed-check')

  const dec = document.getElementById('default-check')
  const lgc = document.getElementById('light-check')
  const drc = document.getElementById('dark-check')

  const fxc = document.getElementById('fixed-check')
  const cnc = document.getElementById('condensed-check')
  const src = document.getElementById('scrollable-check')

  const mainBody = document.getElementById('main-body')

  const darkMode = (localStorage.getItem('darkMode')) ? localStorage.getItem('darkMode') : false
  const layoutBoxed = (localStorage.getItem('layoutBoxed')) ? localStorage.getItem('layoutBoxed') : false
  const leftSideBarTheme = (localStorage.getItem('leftSideBarTheme')) ? localStorage.getItem('leftSideBarTheme') : "dark"
  const leftSidebarCondensed = (localStorage.getItem('leftSidebarCondensed')) ? localStorage.getItem('leftSidebarCondensed') : false
  const leftSidebarScrollable = (localStorage.getItem('leftSidebarScrollable')) ? localStorage.getItem('leftSidebarScrollable') : false

  function init () {
    if (darkMode === "") {
      dmc.setAttribute('checked', "false")
      lmc.setAttribute('checked', "true")
    } else {
      dmc.setAttribute('checked', "true")
      lmc.setAttribute('checked', "false")
    }

    if (layoutBoxed === "") {
      flc.setAttribute('checked', 'true')
    } else {
      boc.setAttribute('checked', 'true')
    }

    if (leftSideBarTheme === "light") {
      lgc.setAttribute('checked', 'true')
    } else if (leftSideBarTheme === "dark") {
      drc.setAttribute('checked', 'true')
    } else {
      dec.setAttribute('checked', 'true')
    }

    if (leftSidebarCondensed === "" && leftSidebarCondensed === "") {
      fxc.setAttribute('checked', 'true')
    } else if (leftSidebarCondensed === "condenced") {
      cnc.setAttribute('checked', 'true')
    } else if (leftSidebarCondensed === "scrollable") {
      src.setAttribute('checked', 'true')
    }

    lmc.setAttribute('onclick', 'siteTheme(this.value)')
    dmc.setAttribute('onclick', 'siteTheme(this.value)')

    flc.setAttribute('onclick', 'boxedCheck(this.value)')
    boc.setAttribute('onclick', 'boxedCheck(this.value)')

    dec.setAttribute('onclick', 'sidebarTheme(this.value)')
    lgc.setAttribute('onclick', 'sidebarTheme(this.value)')
    drc.setAttribute('onclick', 'sidebarTheme(this.value)')

    fxc.setAttribute('onclick', 'sidebarMode(this.value)')
    cnc.setAttribute('onclick', 'sidebarMode(this.value)')
    src.setAttribute('onclick', 'sidebarMode(this.value)')

    mainBody.setAttribute('data-layout-config', '{"darkMode": ' + darkMode + ', "layoutBoxed": ' + layoutBoxed + ', "leftSideBarTheme": "' + leftSideBarTheme + '", "leftSidebarCondensed": ' + leftSidebarCondensed + ', "leftSidebarScrollable": ' + leftSidebarScrollable + ', "showRightSidebarOnStart": false}')

    mainBody.setAttribute('data-leftbar-theme', leftSideBarTheme)
    let boxedMode = (layoutBoxed) ? "boxed" : "fluid"
    mainBody.setAttribute('data-layout-mode', boxedMode)

    let compactMode
    if (!leftSidebarCondensed && !leftSidebarScrollable) {
      compactMode = ""
    } else {
      compactMode = (leftSidebarCondensed) ? "condensed" : "scrollable"
    }
    mainBody.setAttribute('data-leftbar-compact-mode', compactMode)

    document.getElementById('resetBtn').setAttribute('onclick', 'setToDefault()')
  }

  function siteTheme(val) {
    let darkmode = (val === 'dark') ? '1' : ''
    localStorage.setItem('darkMode', darkmode);
  }

  function boxedCheck(val) {
    let boxed = (val === 'boxed') ? '1' : ''
    localStorage.setItem('layoutBoxed', boxed);
  }

  function sidebarTheme(val) {
    localStorage.setItem('leftSideBarTheme', val)
  }

  function sidebarMode(val) {
    switch (val) {
      case 'condensed':
        localStorage.setItem('leftSidebarCondensed', '1')
        localStorage.setItem('leftSidebarScrollable', '')
        break
      case 'scrollable':
        localStorage.setItem('leftSidebarCondensed', '')
        localStorage.setItem('leftSidebarScrollable', '1')
        break
      default:
        localStorage.setItem('leftSidebarCondensed', '')
        localStorage.setItem('leftSidebarScrollable', '')
        break
    }
  }

  function setToDefault() {
    localStorage.setItem('darkMode', '');
    localStorage.setItem('layoutBoxed', '');
    localStorage.setItem('leftSideBarTheme', 'default')
    localStorage.setItem('leftSidebarCondensed', '')
    localStorage.setItem('leftSidebarScrollable', '')
    mainBody.setAttribute('data-layout-config', '{"darkMode":"", "layoutBoxed":"", "leftSideBarTheme":"default", "leftSidebarCondensed": "", "leftSidebarScrollable":"", "showRightSidebarOnStart": ""}')
    mainBody.setAttribute('data-leftbar-theme', 'default')
  }

  init()
</script>
